<template>
  <div class="top">
    <div style="height: 100%" class="topBox" v-if="types == 3">
      <div class="title3 fontDetails">辽宁省保交楼数据监控中心-{{ name }}-{{ develName }}</div>
      <div class="tabs flex fend">
        <div @click="goBack()" style="margin-left: 55px">返回上一页</div>
        <div @click="goHome()">返回首页</div>
      </div>
      <div class="search">
        <div>
          <input type="text" v-model="inputValue" placeholder="请输入开发商或项目名称" @input="getInputValue" />
          <button @click="getInputValue()" class="finger">搜索</button>
          <!-- 下拉框 -->
          <ul class="dropd-down" :style="{ height: dropdDownHeight + 'px' }" v-if="dropdDownData">
            <li v-for="(item, index) in dropdDownData" :key="index" @click="useLis(index)">
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div style="height: 100%" class="topBox" v-if="types == 2">
      <div class="title2">辽宁省保交楼数据监控平台-{{ name }}看板</div>
      <div class="tabs flex fend">
        <div @click="goHome()" style="margin-left: 50px">返回首页</div>
      </div>
      <div class="search">
        <div>
          <input type="text" v-model="inputValue" placeholder="请输入开发商或项目名称" @input="getInputValue" />
          <button @click="getInputValue()" class="finger">搜索</button>
          <!-- 下拉框 -->
          <ul class="dropd-down" :style="{ height: dropdDownHeight + 'px' }" v-if="dropdDownData">
            <li v-for="(item, index) in dropdDownData" :key="index" @click="useLi(index)">
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, watch, onMounted, getCurrentInstance, defineEmits } from "vue";
import { dropdown } from "@/api/bjBuilding";
import { useRouter } from "vue-router";
const inputValue = ref(null);
const dropdDownHeight = ref(null);
const dropdDownData = ref(null);
let { proxy } = getCurrentInstance();
const emit = defineEmits(["childEvent"]);
// 监听input输入框的值
// watch(inputValue, (val) => {
//     getInputValue()

// });

const props = defineProps({
  types: {
    type: Number,
  },
  develName: {
    type: String,
  },
  name: {
    type: String,
  },
});

onMounted(() => {});

const router = useRouter();
// 返回上一页
const goBack = () => {
  router.go(-1);
};
// 返回首页
const goHome = () => {
  router.push("/bjBuilding");
};
// 获取搜索框值
const getInputValue = async () => {
  if (inputValue.value != "") {
    await dropdown(inputValue.value).then((res) => {
      if (res.code == 0) {
        if (res.data.kfs.length > 5) {
          // dropdDownData
          dropdDownHeight.value = 100;
        }
        let arr = [];
        res.data.kfs.forEach((item) => {
          item.type = "kfs";
          arr.push(item);
        });
        res.data.pro.forEach((item) => {
          item.type = "pro";
          arr.push(item);
        });
        dropdDownData.value = arr;
      }
    });
  } else {
    dropdDownData.value = null;
  }
};
// 选择搜索框某一项
const useLi = (id) => {
  inputValue.value = dropdDownData.value[id].name;

  if (dropdDownData.value[id].type == "kfs") {
    proxy.$goDetail(dropdDownData.value[id].value);
  } else if (dropdDownData.value[id].type == "pro") {
    proxy.$goProDetail(dropdDownData.value[id].name, dropdDownData.value[id].value);
  }

  setTimeout(() => {
    dropdDownData.value = null;
  }, 100);
};
// 点击空白隐藏输入框下拉
const useInput = (id) => {
  dropdDownData.value = null;
};

const someMethod = () => {
  return {
    someData,
    someMethod,
    inputValue,
    dropdDownData,
    dropdDownHeight,
    useLi,
  };
};
</script>

<style scoped lang="less">
.fontDetails {
  font-size: 23px !important;
}
.top {
  grid-column: 1 / 4;
  background: url("@/assets/img/bjBuilding/headerbg.png");
  background-size: 100% 100%;
  .title {
    font-size: 50px;
    background: -webkit-linear-gradient(to bottom, #ffffff, #a1b8ea);
    background: linear-gradient(to bottom, #ffffff, #a1b8ea);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    display: flex;
    align-items: center;
    padding-left: 50px;
  }
}
.tabs > div:hover {
  cursor: pointer;
}
.tabs > div:last-child {
  right: 0px !important;
}
input::placeholder {
  color: #ffffff;
}
.dropd-down {
  font-size: 14px;
  color: #fff;
  position: absolute;
  z-index: 1;
  list-style-type: none;
  // height: 100px;
  overflow-y: scroll;
  white-space: nowrap;
  scrollbar-width: none;
  li {
    width: 338px;
    padding: 15px 10px;
    background-color: rgba(7, 68, 153, 1);
    box-sizing: border-box;
  }
}
.dropd-down li:hover {
  background-color: rgba(28, 91, 204, 1);
  cursor: pointer;
}
input:focus {
  outline: none; /* 移除默认的蓝色轮廓 */
  border: rgba(7, 68, 153, 1); /* 设置新的边框颜色为红色 */
}
</style>
